<template>
  <div>
    <!-- 日期选择器 -->
    <div>
      <el-date-picker
        v-model="searchDates"
        type="daterange"
        range-separator="To"
        start-placeholder="开始日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        end-placeholder="截止日期"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>
    <!-- 柱形图 -->
    <div>
      <el-row>
        <el-col :span="12">
          <div ref="totalAmountDiv" style="width:100%;height:500px"></div>
        </el-col>
        <el-col :span="12">
          <div ref="totalNumDiv" style="width:100%;height:500px"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { GetOrderStatistics } from '@/api/orderStatistics'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
const searchDates = ref([])
const totalAmountDiv = ref({})
const totalNumDiv = ref({})
const handleSearch = async () => {
  if (!searchDates.value || searchDates.value.length != 2) {
    ElMessage.warning('请选择时间日期')
    return
  }
  const { data } = await GetOrderStatistics(
    searchDates.value[0],
    searchDates.value[1]
  )

  //订单总金额
  initEcharts(
    totalAmountDiv.value,
    data.totalAmountTitle,
    data.dateList,
    data.totalAmountList
  )
  //订单数量
  initEcharts(
    totalNumDiv.value,
    data.totalNumTitle,
    data.dateList,
    data.totalNumList
  )
}
//参数1：显示echarts的标签，参数2：柱形图标题 ， 参数3：时间日期列表  参数4：数据列表
const initEcharts = (echartsDiv, title, dates, datas) => {
  var myChart2 = echarts.init(echartsDiv)
  var option2 = {
    title: {
      //标题：
      text: title,
      left: 'left',
    },
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      data: [title],
    },
    xAxis: {
      type: 'category',
      //订单统计 日期列表升序排列列表
      data: dates,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: title,
        //订单统计 日期列表升序排列 统计值的 列表
        data: datas,
        type: 'bar',
      },
    ],
  }

  myChart2.setOption(option2)
}
</script>
